{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'product_page' %}

{% block stylesheet %}
    <style>

        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }

        #productDescription {
            padding: 16px 20px 10px 20px;
            border-bottom: #ddd solid 1px;
            line-height: 22px;
            font-size: 13px;
            color: #75787b;
        }

        #productDescription p {
            padding: 0;
        }

        .mufootfixboxs-ul {
            margin: 0 auto;
            background: #fff;
            border-top: #f1f1f1 solid 1px;
            max-width: 780px;
            overflow: hidden;
            padding: 0;
        }

        .mufootfixboxs {
            background: #fff;
            height: 50px;
            line-height: 50px;
            color: #fff;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1000;
            width: 100%;
        }

        .mufootfixboxs-ul li.cartico02 {
            position: relative;
        }

        .mufootfixboxs-ul li span {
            position: absolute;
            top: 5px;
            left: 22px;
            height: 18px;
            line-height: 18px;
            width: 18px;
            z-index: 10;
            font-size: 12px;
            color: #fff;
            background: #c00;
            border-radius: 50%;
        }

        .mu-dis-info .mufootfixboxs-ul li.mu-foot-buy {
            width: calc(100% - 240px);
            background: #c00;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
        }

        .mufootfixboxs-ul li.mu-foot-buy a {
            color: #fff;
            font-size: 13px;
            font-weight: bold;
            padding: 0;
        }

        .mufootfixboxs-ul li.mu-foot-buy i.fa {
            padding: 0 0 0 5px;
            color: #fff;
            font-size: 13px;
        }

        .mufootfixboxs-ul li a {
            display: block;
            font-size: 12px;
            line-height: 50px;
            text-transform: uppercase;
            color: #333;
            text-align: center;
        }

        .mufootfixboxs-ul li i.fa {
            font-size: 15px;
            font-weight: normal;
            color: #c00;
            padding-right: 3px;
        }

        .mufootfixboxs-ul li {
            width: 33.3334%;
            box-sizing: border-box;
            float: left;
            border-right: #f1f1f1 solid 1px;
        }

        .mu-dis-info .mufootfixboxs-ul li {
            width: 80px;
        }

        #muinfobuynow {
            background: #c00;
            display: none;
            width: calc(100% - 240px);
        }

        .mu-dis-info #muinfobuynow {
            display: block;
        }

        .munoproduct_info .mufootfixboxs-ul li.muno {
            display: none;
        }

        .mufootfixboxs-ul {
            margin: 0 auto;
            background: #fff;
            border-top: #f1f1f1 solid 1px;
            max-width: 780px;
        }

        .mufootfixboxs-ul .muno01, .mufootfixboxs-ul .muno {
            border-right: #fff solid 1px;
        }

        .munoproduct_info .mufootfixboxs-ul li.muno {
            display: none;
        }

        .mufootfixboxs-ul .muno {
            background: #fb6714;
        }

        .munoproduct_info .mufootfixboxs-ul li {
            width: 50%;
        }

        .deal-highlights {
            padding: 16px 0;
            border-bottom: #e6e7e8 solid 1px;
        }

        .deal-highlights ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .deal-highlights ul li {
            background: url(/html/template/default/assets/img/product/info03.png) no-repeat right center;
            padding: 0 10px;
            box-sizing: border-box;
            float: left;
            width: 33.3334%;
            text-align: center;
            list-style: none
        }

        .deal-highlights ul li.muno {
            background: none;
        }

        .deal-highlights ul li .highlights-icon {
            display: block;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .deal-highlights ul li .highlights-icon img {
            vertical-align: top;
            display: inline-block;
            max-width: 100%;
            width: auto;
            height: auto;
        }

        .deal-highlights ul li .highlights-icon.iconinfotop img {
            vertical-align: top;
            display: inline-block;
            max-width: 100%;
            width: auto;
            height: auto;
        }

        .highlights-text {
            display: block;
            line-height: 16px;
            height: 32px;
            padding-top: 6px;
            color: #75787b;
            text-transform: capitalize;
            font-size: 13px;
        }

        .productPricesboxs {
            padding: 16px 0;
        }

        #productPrices {
            color: #fc0048;
            font-size: 22px;
            line-height: 22px;
        }

        #productPrices .normalprice {
            font-size: 13px;
            font-weight: normal;
            color: #727578;
            text-decoration: line-through;
        }

        #productPrices .productSpecialPrice {
            font-size: 22px;
            color: #d62672;
            font-weight: normal;
        }

        #productPrices .productPriceDiscount {
            display: block;
            float: right;
        }

        #productPrices .productPriceDiscount span {
            display: inline-block;
            font-size: 12px;
            color: #d62672;
            padding: 2px 8px;
            line-height: 14px;
            border: #d62672 solid 1px;
            border-radius: 3px;
        }

        #productDetailsList {
            padding: 5px 0 0 0;
            display: inline-block;
            float: right
        }

        #productDetailsList li {
            color: #75787b;
            line-height: 20px;
            font-size: 13px;
            list-style: none
        }

        .parallax_boxs h3 {
            font-size: 16px;
            line-height: 26px;
            padding-bottom: 10px;
            color: #333;
            font-weight: bold;
            text-align: center;
        }

        #countdown {

            display: block;

            height: 26px;
            line-height: 26px;

            overflow: hidden;
            padding-bottom: 16px;


        }

        .tick-wrapper {
            text-align: center;
            height: 26px;
            line-height: 26px;
        }

        .tick-wrapper li {

            height: 26px;
            line-height: 26px;
            display: inline-block;

            text-align: center;
            padding-right: 10px;

        }

        .tick-wrapper li p {

            font-size: 12px;
            color: #000;
            line-height: 26px;
            font-weight: normal;
            display: inline;
        }


        .shipping-countdown-day, .shipping-countdown-hours, .shipping-countdown-minutes, .shipping-countdown-seconds {
            font-size: 26px;
            line-height: 26px;
            font-weight: bold;
            color: red;
        }

        .mu-no-info #mainWrapper {
            padding: 0;
        }

        .mumbattbox {
            padding: 20px 20px 0 20px;
            border-top: #e6e7e8 solid 1px;
        }

        .muinfo-free {
            border-top: #e6e7e8 solid 1px;
            margin-top: 10px;
        }

        .muinfo-free ul {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .muinfo-free ul li {
            border-bottom: #e6e7e8 solid 1px;
            line-height: 48px;
            border-bottom: #e6e7e8 solid 1px;
            padding: 0 20px;
            text-transform: capitalize;
            font-size: 13px;
            color: #333;
            float: left;
            width: 33.3334%;
            box-sizing: border-box;
            list-style: none
        }

        .muinfo-free ul li.free_shipping {
            background: url(/html/template/default/assets/img/product/info05.png) no-repeat 20px center;
            padding-left: 38px;
        }

        .muinfo-free ul li.free_ship02 {
            background: url(/html/template/default/assets/img/product/info06.jpg) no-repeat 20px center;
            padding-left: 38px;
        }


    </style>
{% endblock %}

{% block javascript %}
<script>
    eccube.classCategories = {{ class_categories_as_json(Product)|raw }};

        // 規格2に選択肢を割り当てる。
        function fnSetClassCategories(form, classcat_id2_selected) {
            var $form = $(form);
            var product_id = $form.find('input[name=product_id]').val();
            var $sele1 = $form.find('select[name=classcategory_id1]');
            var $sele2 = $form.find('select[name=classcategory_id2]');
            eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
        }

        {% if form.classcategory_id2 is defined %}
        fnSetClassCategories(
            $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
        );
        {% elseif form.classcategory_id1 is defined %}
        eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
        {% endif %}
    </script>
    <script>
        $(function() {
            // bfcache無効化
            $(window).bind('pageshow', function(event) {
                if (event.originalEvent.persisted) {
                    location.reload(true);
                }
            });

            $('.item_visual').slick({
                dots: false,
                arrows: false,
                infinite: true,//开启循环播放
                autoplay: true,//开启自动播放
                autoplaySpeed: 2000,//自动播放间隔，每2秒播一次
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        dots: true
                    }
                }]
            });

            $('.slideThumb').on('click', function() {
                var index = $(this).attr('data-index');
                $('.item_visual').slick('slickGoTo', index, false);
            });

            // 访问页面 facebook
            setTimeout(()=>{
                console.log('访问页面 facebook');
                fbq('track', 'ViewContent');
            })
        });
    </script>
    <script>
        $(function() {
            $('.add-cart').on('click', function(event) {
                {% if form.classcategory_id1 is defined %}
                // 規格1フォームの必須チェック
                if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
                    $('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
                    return true;
                } else {
                    $('#classcategory_id1')[0].setCustomValidity('');
                }
                {% endif %}

                {% if form.classcategory_id2 is defined %}
                // 規格2フォームの必須チェック
                if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
                    $('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
                    return true;
                } else {
                    $('#classcategory_id2')[0].setCustomValidity('');
                }
                {% endif %}

                // 個数フォームのチェック
                if ($('#quantity').val() < 1) {
                    $('#quantity')[0].setCustomValidity('{{ 'front.product.invalid_quantity'|trans }}');
                    return true;
                } else {
                    $('#quantity')[0].setCustomValidity('');
                }

                event.preventDefault();
                $form = $('#form1');
                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: $form.serialize(),
                    dataType: 'json',
                    beforeSend: function(xhr, settings) {
                        // Buttonを無効にする
                        $('.add-cart').prop('disabled', true);
                    }
                }).done(function(data) {
                    // レスポンス内のメッセージをalertで表示
                    $.each(data.messages, function() {
                        $('#ec-modal-header').html(this);
                    });

                    $('#ec-modal-checkbox').prop('checked', true);

                    // カートブロックを更新する
                    $.ajax({
                        url: "{{ url('block_cart') }}",
                        type: 'GET',
                        dataType: 'html'
                    }).done(function(html) {
                        $('.ec-headerRole__cart').html(html);
                    });
                }).fail(function(data) {
                    alert('{{ 'front.product.add_cart_error'|trans }}');
                }).always(function(data) {
                    // Buttonを有効にする
                    $('.add-cart').prop('disabled', false);
                    fbq('track', 'AddToCart');
                });
            });
        });
    </script>
{% endblock %}

{% block main %}
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <div class="ec-productRole" id="productPage">
        <div class="ec-grid2">
            <div class="ec-grid2__cell">
                <div class="ec-sliderItemRole">
                    <div class="item_visual">
                        {% for ProductImage in Product.ProductImage %}
                            <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
                        {% else %}
                            <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
                        {% endfor %}
                    </div>
                    <div class="item_nav">
                        {% for ProductImage in Product.ProductImage %}
                            <div class="slideThumb" data-index="{{ loop.index0 }}"><img
                                    src="{{ asset(ProductImage, 'save_image') }}"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="ec-grid2__cell">
                <div class="ec-productRole__profile">
                    {# 商品名 #}
                    <div class="ec-productRole__title">
                        <h2 class="ec-headingTitle">{{ Product.name }}</h2>
                    </div>
                    {# タグ #}
                    <ul class="ec-productRole__tags">
                        {% for Tag in Product.Tags %}
                            <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
                        {% endfor %}
                    </ul>
                    <div class="deal-highlights">

                        <ul>

                            <li><span class="highlights-icon iconinfotop"><img
                                        src="/html/template/default/assets/img/product//infoico01.gif"></span><span
                                    class="highlights-text">タイムセール</span></li>

                            <li><span class="highlights-icon iconinfotop"><img
                                        src="/html/template/default/assets/img/product//infoico02.gif"></span><span
                                    class="highlights-text">185+ 買います</span></li>

                            <li class="muno"><a href="#product_review_area"><span class="highlights-icon"><img
                                            src="/html/template/default/assets/img/product//stars_5.gif"></span><span
                                        class="highlights-text">(15) 評価</span></a></li>

                            <div class="clear"></div>

                        </ul>
                    </div>
                    {# 通常価格 #}
                    {% if Product.hasProductClass -%}
                        <div class="productPricesboxs" id="productPricesboxs">
                            <!--bof Product Price block -->
                            <div id="productPrices">
                                {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
                                    <span class="normalprice">{{ Product.getPrice01IncTaxMin|price }}円</span>
                                {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
                                    <span
                                        class="normalprice">{{ Product.getPrice01IncTaxMin|price }}円～ {{ Product.getPrice01IncTaxMax|price }}円</span>
                                {% endif %}
                                {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
                                    &nbsp;<span
                                    class="productSpecialPrice">{{ Product.getPrice02IncTaxMin|price }}円</span>
                                    <span
                                        class="productPriceDiscount"><span>割引:&nbsp;{{ (1 - ( Product.getPrice02IncTaxMin / Product.getPrice01IncTaxMin)) * 100 // 1 }}%OFF</span></span>
                                {% else %}
                                    &nbsp;<span
                                    class="productSpecialPrice">{{ Product.getPrice02IncTaxMin|price }}円 ～ {{ Product.getPrice02IncTaxMax|price }}円</span>
                                    <span class="productPriceDiscount"><span>割引:&nbsp;89%OFF</span></span>
                                {% endif %}
                            </div>
                            <!--eof Product Price block -->
                            <!--bof Product details list  -->
                            <ul id="productDetailsList">
                                <li class="info-bought">5,104+ 購入</li>
                            </ul>
                            <!--eof Product details list -->
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                        <div class="parallax_boxs">
                            <h3>タイムサービス</h3>
                            <div id="countdown">
                                <ul class="tick-wrapper">
                                    <li>
                                        <span class="shipping-countdown-day" id="gtday">0</span>
                                        <p>日</p>
                                    </li>
                                    <li>
                                        <span class="shipping-countdown-hours" id="gthour">1</span>
                                        <p>時</p>
                                    </li>
                                    <li>
                                        <span class="shipping-countdown-minutes" id="gtmin">21</span>
                                        <p>分</p>
                                    </li>
                                    <li>
                                        <span class="shipping-countdown-seconds" id="gtsec">10</span>
                                        <p>秒</p>
                                    </li>
                                </ul>
                            </div>
                            <script language="javascript">
                                startclock()
                                var timerID = null;
                                var timerRunning = false;

                                function showtime() {
                                    Today = new Date();
                                    var NowHour = Today.getHours();
                                    var NowMinute = Today.getMinutes();
                                    var NowMonth = Today.getMonth();
                                    var NowDate = Today.getDate();
                                    var NowYear = Today.getYear();
                                    var NowSecond = Today.getSeconds();
                                    if (NowYear < 2000)
                                        NowYear = 1900 + NowYear;
                                    Today = null;
                                    Hourleft = 23 - NowHour
                                    Minuteleft = 59 - NowMinute
                                    Secondleft = 59 - NowSecond
                                    Yearleft = 2009 - NowYear
                                    Monthleft = 12 - NowMonth - 1
                                    Dateleft = 31 - NowDate
                                    if (Secondleft < 0) {
                                        Secondleft = 60 + Secondleft;
                                        Minuteleft = Minuteleft - 1;
                                    }
                                    if (Minuteleft < 0) {
                                        Minuteleft = 60 + Minuteleft;
                                        Hourleft = Hourleft - 1;
                                    }
                                    if (Hourleft < 0) {
                                        Hourleft = 24 + Hourleft;
                                        Dateleft = Dateleft - 1;
                                    }
                                    if (Dateleft < 0) {
                                        Dateleft = 31 + Dateleft;
                                        Monthleft = Monthleft - 1;
                                    }
                                    if (Monthleft < 0) {
                                        Monthleft = 12 + Monthleft;
                                        Yearleft = Yearleft - 1;
                                    }
//Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'日, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'
//document.form1.left.value=Temp;
                                    document.getElementById('gthour').innerHTML = Hourleft;
                                    document.getElementById('gtmin').innerHTML = Minuteleft;
                                    document.getElementById('gtsec').innerHTML = Secondleft;
                                    timerID = setTimeout("showtime()", 1000);
                                    timerRunning = true;
                                }

                                var timerID = null;
                                var timerRunning = false;

                                function stopclock() {
                                    if (timerRunning)
                                        clearTimeout(timerID);
                                    timerRunning = false;
                                }

                                function startclock() {
                                    stopclock();
                                    showtime();
                                }

                                // -->
                            </script>
                            <div class="clear"></div>
                        </div>
                        <div class="muinfo-free">
                            <ul>
                                <li class="free_shipping">着荷払い</li>
                                <li class="free_shipping">国内発送</li>
                                <li class="free_ship02">送料無料</li>
                                <div class="clear"></div>
                            </ul>
                        </div>
                        {# <div class="ec-productRole__priceRegular"> #}
                        {# {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %} #}
                        {# <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：<span #}
                        {# class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span> #}
                        {# <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span> #}
                        {# {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %} #}
                        {# <span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：<span #}
                        {# class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span> #}
                        {# <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span> #}
                        {# {% endif %} #}
                        {# </div> #}
                    {% else %}
                        {% if Product.getPrice01Max is not null %}
                            <span id="productPricesboxs"
                                  class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
                            <span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
                            <div class="clear"></div>
                            <div class="parallax_boxs">
                                <h3>タイムサービス</h3>
                                <div id="countdown">
                                    <ul class="tick-wrapper">
                                        <li>
                                            <span class="shipping-countdown-day" id="gtday">0</span>
                                            <p>日</p>
                                        </li>
                                        <li>
                                            <span class="shipping-countdown-hours" id="gthour">1</span>
                                            <p>時</p>
                                        </li>
                                        <li>
                                            <span class="shipping-countdown-minutes" id="gtmin">21</span>
                                            <p>分</p>
                                        </li>
                                        <li>
                                            <span class="shipping-countdown-seconds" id="gtsec">10</span>
                                            <p>秒</p>
                                        </li>
                                    </ul>
                                </div>
                                <script language="javascript">
                                    startclock()
                                    var timerID = null;
                                    var timerRunning = false;

                                    function showtime() {
                                        Today = new Date();
                                        var NowHour = Today.getHours();
                                        var NowMinute = Today.getMinutes();
                                        var NowMonth = Today.getMonth();
                                        var NowDate = Today.getDate();
                                        var NowYear = Today.getYear();
                                        var NowSecond = Today.getSeconds();
                                        if (NowYear < 2000)
                                            NowYear = 1900 + NowYear;
                                        Today = null;
                                        Hourleft = 23 - NowHour
                                        Minuteleft = 59 - NowMinute
                                        Secondleft = 59 - NowSecond
                                        Yearleft = 2009 - NowYear
                                        Monthleft = 12 - NowMonth - 1
                                        Dateleft = 31 - NowDate
                                        if (Secondleft < 0) {
                                            Secondleft = 60 + Secondleft;
                                            Minuteleft = Minuteleft - 1;
                                        }
                                        if (Minuteleft < 0) {
                                            Minuteleft = 60 + Minuteleft;
                                            Hourleft = Hourleft - 1;
                                        }
                                        if (Hourleft < 0) {
                                            Hourleft = 24 + Hourleft;
                                            Dateleft = Dateleft - 1;
                                        }
                                        if (Dateleft < 0) {
                                            Dateleft = 31 + Dateleft;
                                            Monthleft = Monthleft - 1;
                                        }
                                        if (Monthleft < 0) {
                                            Monthleft = 12 + Monthleft;
                                            Yearleft = Yearleft - 1;
                                        }
//Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'日, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'
//document.form1.left.value=Temp;
                                        document.getElementById('gthour').innerHTML = Hourleft;
                                        document.getElementById('gtmin').innerHTML = Minuteleft;
                                        document.getElementById('gtsec').innerHTML = Secondleft;
                                        timerID = setTimeout("showtime()", 1000);
                                        timerRunning = true;
                                    }

                                    var timerID = null;
                                    var timerRunning = false;

                                    function stopclock() {
                                        if (timerRunning)
                                            clearTimeout(timerID);
                                        timerRunning = false;
                                    }

                                    function startclock() {
                                        stopclock();
                                        showtime();
                                    }

                                    // -->
                                </script>
                                <div class="clear"></div>
                            </div>
                        {% endif %}
                    {% endif %}
                    {# 販売価格 #}
                    {# <div class="ec-productRole__price"> #}
                    {# {% if Product.hasProductClass -%} #}
                    {# {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %} #}
                    {# <div class="ec-price"> #}
                    {# <span #}
                    {# class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span> #}
                    {# <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span> #}
                    {# </div> #}
                    {# {% else %} #}
                    {# <div class="ec-price"> #}
                    {# <span #}
                    {# class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span> #}
                    {# <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span> #}
                    {# </div> #}
                    {# {% endif %} #}
                    {# {% else %} #}
                    {# <div class="ec-price"> #}
                    {# <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span> #}
                    {# <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span> #}
                    {# </div> #}
                    {# {% endif %} #}
                    {# </div>` #}
                    {# 商品コード #}
                    {# {% if Product.code_min is not empty %} #}
                    {# <div class="ec-productRole__code"> #}
                    {# {{ 'front.product.code'|trans }}： <span #}
                    {# class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span> #}
                    {# </div> #}
                    {# {% endif %} #}
                    {# 関連カテゴリ #}
                    <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
                        {% if Product.stock_find %}
                            <div class="ec-productRole__actions">
                                {% if form.classcategory_id1 is defined %}
                                    <div class="ec-select">
                                        {{ form_widget(form.classcategory_id1) }}
                                        {{ form_errors(form.classcategory_id1) }}
                                    </div>
                                    {% if form.classcategory_id2 is defined %}
                                        <div class="ec-select">
                                            {{ form_widget(form.classcategory_id2) }}
                                            {{ form_errors(form.classcategory_id2) }}
                                        </div>
                                    {% endif %}
                                {% endif %}
                                <div class="ec-numberInput"><span>{{ 'common.quantity'|trans }}</span>
                                    {{ form_widget(form.quantity) }}
                                    {{ form_errors(form.quantity) }}
                                </div>
                            </div>
                            <div class="ec-productRole__btn">
                                <button type="submit" class="ec-blockBtn--action add-cart">
                                    {{ 'front.product.add_cart'|trans }}
                                </button>
                            </div>
                        {% else %}
                            <div class="ec-productRole__btn">
                                <button type="button" class="ec-blockBtn--action" disabled="disabled">
                                    {{ 'front.product.out_of_stock'|trans }}
                                </button>
                            </div>
                        {% endif %}

                        {{ form_rest(form) }}
                    </form>
                    <div class="ec-modal">
                        <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
                        <div class="ec-modal-overlay">
                            <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
                            <div class="ec-modal-wrap">
                                <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img
                                            src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
                                <div id="ec-modal-header"
                                     class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
                                <div class="ec-modal-box">
                                    <div class="ec-role">
                                        <label for="ec-modal-checkbox"
                                               class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</label>
                                        <a href="{{ url('cart') }}"
                                           class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {# {% if BaseInfo.option_favorite_product %} #}
                    {# <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post"> #}
                    {# <div class="ec-productRole__btn"> #}
                    {# {% if is_favorite == false %} #}
                    {# <button type="submit" id="favorite" class="ec-blockBtn--cancel"> #}
                    {# {{ 'front.product.add_favorite'|trans }} #}
                    {# </button> #}
                    {# {% else %} #}
                    {# <button type="submit" id="favorite" class="ec-blockBtn--cancel" #}
                    {# disabled="disabled">{{ 'front.product.add_favorite_alrady'|trans }} #}
                    {# </button> #}
                    {# {% endif %} #}
                    {# </div> #}
                    {# </form> #}
                    {# {% endif %} #}
                    <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
                    </div>
                </div>
            </div>
        </div>
        {% if Product.freearea %}
            <div class="ec-productRole__description">
                {{ include(template_from_string(Product.freearea)) }}
            </div>
        {% endif %}
        <div class="mufootfixboxs  mu-dis-info">

            <ul class="mufootfixboxs-ul">
                <li><a href="#productPage" rel="nofollow"><i class="fa fa-home" aria-hidden="true"></i>ホーム</a></li>
                <li class="cartico02"><a href="/cart" rel="nofollow"><i class="fa fa-shopping-cart"
                                                                        aria-hidden="true"></i>カート</a></li>
                <li><a rel="nofollow" href="#product_review_area"><i class="fa fa-search"
                                                                     aria-hidden="true"></i>コメント</a></li>
                <li id="muinfobuynow" class="mu-foot-buy">
                    <div class="theme-buy">
                        <a class="btn btn-large theme-login" href="javascript:$('.add-cart').trigger('click')">注文する<i
                                class="fa fa-chevron-right" aria-hidden="true"></i></a>
                    </div>
                </li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
        </div>

    </div>
    {{ include('Block/ticker.twig') }}


{% endblock %}
